<html>
<script>
    function directionBtnDown(direction) {
        var url = "requestAddress"
        var request = new XMLHttpRequest();
        request.open("POST", url);
 
        request.send(direction)
    }
 
    function directionBtnUp() {
        var url = "requestAddress"
        var request = new XMLHttpRequest();
        request.open("POST", url);
        request.send("S")
    }
    
</script>
<style type="text/css">
    span.car {
        position: absolute;
        margin-top: 30%;
        height: 480px;   
    }
 
    span.camera {
        position: absolute;
        margin-top: 5%;
        margin-left: 290px;
        height: 480px;
        width: 640px;
        background-color: blue
    }
 
    span.camera_control {
        position: absolute;
        margin-top: 30%;
        margin-left: 950px;
        height: 480px;
        background-color: blue
    }
 
 
    button.top {
        position: absolute;
        height: 50px;
        width: 90px;
        margin-left: 90px
    }
 
    button.left {
        position: absolute;
        height: 50px;
        width: 90px;
        margin-top: 50px;
    }
 
    button.right {
        position: absolute;
        height: 50px;
        width: 90px;
        margin-top: 50px;
        margin-left: 180px
    }
 
    button.bottom {
        position: absolute;
        height: 50px;
        width: 90px;
        margin-top: 100px;
        margin-left: 90px
    }
	button.stop {
        position: absolute;
        height: 50px;
        width: 90px;
        margin-top: 50px;
        margin-left: 90px
    }
	button.auto {
        position: absolute;
        height: 50px;
        width: 90px;
        margin-top: -60px;
        margin-left: 1080px
    }
 
    button.auto_audio {
        position: absolute;
        height: 50px;
        width: 90px;
        margin-top: 0px;
        margin-left: 1080px
    }
 
    button.Fist {
        position: absolute;
        height: 50px;
        width: 90px;
        margin-top: 60px;
        margin-left: 1080px
    }
 
    button.both {
        position: absolute;
        height: 50px;
        width: 90px;
        margin-top: 120px;
        margin-left: 1080px
    }
	button.garbage {
        position: absolute;
        height: 50px;
        width: 90px;
        margin-top: 180px;
        margin-left: 1080px
    }
*{
    -webkit-touch-callout:none;  /*系统默认菜单被禁用*/
    -webkit-user-select:none; /*webkit浏览器*/
    -khtml-user-select:none; /*早期浏览器*/
    -moz-user-select:none;/*火狐*/
    -ms-user-select:none; /*IE10*/
    user-select:none;
}
input,textarea {
    -webkit-user-select:auto; /*webkit浏览器*/
    margin: 0px;
    padding: 0px;
    outline: none;
}
</style>
 
<head>
    <title>control page</title>
</head>
 
<body>
    <span id="car_control" class="car">
        <button class="top drectionBtn" id="F" onmousedown="directionBtnDown('forward')" onmouseup="">F</button>
        <button class="left drectionBtn" id="L" onmousedown="directionBtnDown('left')" onmouseup="">L</button>
        <button class="right drectionBtn" id="R" onmousedown="directionBtnDown('right')" onmouseup="">R</button>
        <button class="bottom drectionBtn" id="B" onmousedown="directionBtnDown('back')" onmouseup="">B</button>
		<button class="auto drectionBtn" id="Auto" onmousedown="directionBtnDown('auto')" onmouseup="">Auto</button>
        <button class="auto_audio drectionBtn" id="Auto_Audio" onmousedown="directionBtnDown('auto_audio')" onmouseup="">Auto_Audio</button>
        <button class="Fist drectionBtn" id="Fist" onmousedown="directionBtnDown('auto_Fist')" onmouseup="">Fist</button>
        <button class="both drectionBtn" id="Both" onmousedown="directionBtnDown('auto_both')" onmouseup="">Both</button>
        <button class="garbage drectionBtn" id="garbage" onmousedown="directionBtnDown('garbage')" onmouseup="">garbage</button>
		<button class="stop drectionBtn" id="stop" onmousedown="directionBtnDown('fuck')" onmouseup="">stop</button>
    </span>
    <span id="camera_view" class="camera">
        <img id="view" src="http://10.181.231.209:8080/?action=stream">
    </span>
 
</body>
 
</html>
